<template>
	<view class="">
		<view class="top-bg"></view>
		<view class="column center" style="padding-top:60upx;">
			<view class="top-qrcode-con column center">
				<view class="top-img">
					<view class="top-i-con" style="position: relative;">
						<image src="/static/img/yqbg.png" mode="" class="img"></image>
						<view class="top-i-txt">邀请海报</view>
					</view>
				</view>
				<view class="qrcode" style="margin: 40upx 0;"><image :src="qrcode" class="qrcode"></image></view>
				<view class="share-btn-con">
					<view class="share-btn">分享好友</view>
					<button open-type="share" class="share"></button>
				</view>
			</view>
		</view>
		<view>
			<view class="share-title row between" style="padding: 30upx;">
				<view @tap="onClickItemTitle(0)">
					<text :class="{ active: currentIndex == 0 }">邀请成就</text>
					<text class="active" style="margin-left: 8upx;">13人</text>
				</view>
				<view @tap="onClickItemTitle(1)">
					<text :class="{ active: currentIndex == 1 }">邀请收益</text>
					<text class="active" style="margin-left: 8upx;">￥23.00</text>
				</view>
			</view>
			<view class="" v-if="currentIndex == 0">
				<view class="item-swiper">
					<view class="row between" style="margin-bottom: 20upx;" v-for="(item, index) in 20" :key="index">
						<view class="row">
							<image src="/static/img/bg66.png" class="item-icon"></image>
							<view class="item-name" style="margin-left: 60upx;">用户昵称</view>
						</view>

						<view class="item-name" style="color: #999999;">2021.10.12</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="row top-con">
					<view class="row-item flex2 r-title">昵称</view>
					<view class="row-item flex2 r-title">消费金额</view>
					<view class="row-item flex3 r-title">收益金额</view>
					<view class="row-item flex3 r-title">到账时间</view>
				</view>
				<view class="item-swiper" style="padding-bottom: 140upx;">
					<view class="item row" v-for="(item, index) in 20" :key="index">
						<view class="row-item flex2 item-name clamp">小张</view>
						<view class="row-item flex2 item-name">25.00</view>
						<view class="row-item flex3 item-name">5.00</view>
						<view class="row-item flex3 item-name">2021.10.12</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn b-t row center" v-if="currentIndex==1">
			<view class="f-btn" @tap="navTo('/pages/leader/withdrawal')">
				立即提现
			</view>
		</view>

		<view class="tkiQrcode">
			<tki-qrcode cid="qrcode2307" :val="path" :size="size"  :loadMake="true" ref="qrcode2307" class="qrcode" @result="qrcodeComplete"></tki-qrcode>
		</view>
	</view>
</template>

<script>
const bassUrl = require('@/common/js/config.js').bass;
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	components: {
		tkiQrcode
	},
	data() {
		return {
			size: 334,
			qrcode: '',
			currentIndex: 0
		};
	},

	computed: {
		path() {
			return `${bassUrl}/shop?scene=${this.shopId}`;
		}
	},
	onReachBottom() {
		console.log('加载')
	},
	onShareAppMessage() {
		return {
			path: `/pages/tabs/home?inviteId=${uni.getStorageSync('uid')}`
		};
	},
	methods: {
		qrcodeComplete(result) {
			this.qrcode = result;
		},
		onClickItemTitle(type) {
			this.currentIndex = type;
		}
	}
};
</script>

<style scoped lang="scss">
.active {
	color: #fe2525;
}
.top-bg {
	height: 200upx;
	background: #2781a7;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.top-qrcode-con {
	padding: 20upx;
	width: 678upx;
	height: 614upx;
	background: #ffffff;
	box-shadow: 0px 10upx 20upx 0px rgba(217, 217, 217, 0.45);
	border-radius: 12upx;
	position: relative;
}
.tkiQrcode {
	position: fixed;
	top: -99999px;
}
.qrcode {
	width: 334upx;
	height: 334upx;
}
.share-btn {
	width: 460upx;
	height: 80upx;
	background: #2781a7;
	border-radius: 40upx;
	text-align: center;
	line-height: 80upx;
	color: #ffffff;
}
.share-btn-con {
	position: relative;
}
.share {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	opacity: 0;
}
.top-img {
	position: absolute;
	top: -22upx;
}
.top-i-con {
	width: 442upx;
	height: 96upx;
}
.img {
	width: 442upx;
	height: 96upx;
}
.top-i-txt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 42upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #e11f00;
}

.top-con {
	height: 88upx;
	background: #f6f6f6;
	padding: 0 20upx;
}
.row-item {
	text-align: center;
}
.flex2 {
	flex: 2;
}
.flex3 {
	flex: 3;
}
.item-swiper {
	padding: 20upx;
}
.item {
	height: 66upx;
}
.item-name {
	font-size: 26upx;
	color: #333333;
}
.item-icon {
	width: 74upx;
	height: 74upx;
	border-radius: 50%;
}
.r-title {
	font-size: 24upx;
	color: #666666;
}
.footer-btn{
	position: fixed;
	bottom: 0;
	height: 120upx;
	width: 100%;
	z-index: 99;
	background: #FFFFFF;
}
.f-btn{
	width: 706upx;
	height: 80upx;
	text-align: center;
	line-height: 80upx;
	border: 1px solid #FE2525;
	border-radius: 40upx;
	font-size: 30upx;
	color: #FE2525;
}
</style>
